<template>
  <div class="permissionbox">
    <el-card class="permissionbox__active_permission">
      <template #header>
        <div class="card-header">
          <span>当前使用的许可</span>
        </div>
      </template>

      <div class="permissionbox__active_permission__group">
        <template v-for="item in activesDatas" :key="item.id">
          <div class="permissionbox__active_permission__item" >
            <el-tag
              closable
              :type="getComponentType(item.type)"
              :key="item.id"
              @close="closeTag(item)"
            >{{item.content}}</el-tag>
          </div>
        </template>
      </div>
    </el-card>

    <el-divider content-position="left">
      <i class="el-icon-s-custom"></i>
    </el-divider>

    <div class="permissionbox__list">
      <el-collapse v-model="activeName" accordion>
        <template v-for="(item,index) in permissions" :key="item.permissionType">
          <el-collapse-item :title="item.permissionType" :name="item.permissionType" >
            <template v-for="it in item.permissions" :key="it.id">
              <div class="permissionbox__item" >
                <div class="permissionbox__item__tool">
                  <el-button
                    :type="getComponentType(index)"
                    size="mini"
                    icon="el-icon-circle-plus-outline"
                    v-if="!it.rpid"
                    @click="add(it,index)"
                  >添加</el-button>
                  <el-button
                    :type="getComponentType(index)"
                    size="mini"
                    icon="el-icon-check"
                    disabled
                    plain
                    v-if="it.rpid"
                  >已添加</el-button>
                </div>
                <div class="permissionbox__item__content">{{it.content}}</div>
              </div>
            </template>
          </el-collapse-item>
        </template>
      </el-collapse>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

import {listApi,addApi,delApi } from '@/manager-core/api/rolePermission/rolePermission'



export default defineComponent({
  name: 'rolePerInput',

  components: {
    
  },

  data(){
    return {  
      id : '' as any,    
      permissions : [] as any,
      activesDatas : [] as any,
      loading : false      
    }
  },

  methods:{
    init(){
      console.log("rmi",this.id)
      if(this.loading){
        return
      }

      this.loading = true;
      if(this.id){
        listApi(this.id)
          .then((r:any)=>{
            // console.log("listByRidApi",r);
            this.permissions = r;

            this.activesDatas = new Array();

            for (let i = 0; i < this.permissions.length; i++) {
              let items = this.permissions[i].permissions;
              for (let j = 0; j < items.length; j++) {
                let item = items[j];
                if (item.rpid) {
                  this.activesDatas.push(item);
                }
              }
            }

          }).finally(()=>{
            this.loading = false;
          })
      }
      
    },

    add(item:any,type:any){
      addApi(this.id,item.id)
        .then((r:any) =>{
          item.rpid = r.id;
          item.type = type;
          this.activesDatas.push(item);
        })
    },

    closeTag(item:any) {
      var _this = this;

      delApi(item.rpid)
        .then((r:any) =>{
            let index = _this.activesDatas.indexOf(item);
            _this.activesDatas.splice(index, 1);

            for (let index in _this.permissions) {
              let data :any= _this.permissions[index];

              data.permissions.forEach((d:any) => {
                if (d.id == item.id) {
                  d.rpid = null;
                }
              });
            }
        })
    },

    getComponentType(type:number) {
      let d = type % 5 ;

      if (d == 0) {
        return "success";
      } else if (d == 1) {
        return "primary";
      } else if (d == 2) {
        return "warning";
      } else if (d == 3) {
        return "danger";
      } else {
        return "info";
      }
    }



  },

  mounted(){
    let id = this.$route.query.id;
    if(!id){
      alert("页面错误，请刷新")
    }
    else {
      this.id = id;
      this.init();
    }
  },

  created(){
    let id = this.$route.query.id;
    if(!id){
      alert("页面错误，请刷新")
    }
    else {
      this.id = id;
      this.init();
    }
  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.permissionbox {
  min-width: 400px;
}

.permissionbox__item {
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px 10px;

  display: flex;
  flex-wrap: nowrap; // 换行 nowrap | wrap | wrap-reverse
  flex-direction: row; //| row-reverse | column | column-reverse;
  justify-content: flex-start; // 定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around;
  align-items: flex-start; // | flex-end | center | baseline | stretch;
  transition: background-color 0.15s linear;

  .permissionbox__item__tool {
    margin-right: 5px;
  }

  .permissionbox__item__content {
    color: #606266;
  }

  &:hover {
    background-color: #EBEEF5;
  }
}

.permissionbox__active_permission__item {
  margin-bottom: 5px;

  > p {
    font-size: 14px;
    font-weight: bold;
  }

  > .el-tag {
    margin-right: 5px;
  }
}
.permissionbox__active_permission__group {
  display: flex;
  flex-wrap: wrap; // 换行 nowrap | wrap | wrap-reverse
  flex-direction: row; //| row-reverse | column | column-reverse;
  justify-content: flex-start; // 定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around;
  align-items: flex-start; // | flex-end | center | baseline | stretch;
}
</style>
